
<template>
  <div class="sKill-item">
       <div class="bigBox">
          <div class="chlidBox"></div>
          <p>
              <span>{{name}}</span>
              <span>{{number}}%</span>
            </p>
        </div>
  </div>
</template>

<script>
export default {
name:"skill-item",
props:{
    name:{
        type:String,
        default:"未知"
    },
    number:{
        type:String,
        default:0,
    }
},
mounted() {
    let bigWidth =parseInt(window.getComputedStyle(this.$el.querySelector(".bigBox")).width);
    let childWidth = (bigWidth/100)*this.number;

    this.$el.querySelector(".chlidBox").style.width =childWidth+"px" ;
},

}
</script>

<style scoped>
.sKill-item{
    width:50%;
    box-sizing: border-box;
    padding: 10px 20px;
}
.bigBox{
    position: relative;
    width: 100%;
    height: 30px;
    border-radius: 30px;
    background: #eee;
}
.chlidBox{
    width: 100px;
    height: 30px;
    background: skyblue;
    border-radius: 30px;
}
.bigBox  p {
   display: flex;
   justify-content: space-between;
   position: absolute;
    top:0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    height: 30px;
    line-height: 30px;
    color: #fff;
    padding: 0 20px;
}
.chlidBox p span{
    display: block;
}

</style>